<template>
  <view class="wrap">
    <view class="head_box">
      <view class="head_info">
        <view class="head_info_left">
          {{retData.info.name}}
        </view>
        <view class="head_info_right">
          规格：{{retData.info.data_specs}}
        </view>
      </view>
      <view class="head_corp">
        <view class="head_corp_left">
          {{retData.info.corporate}}
        </view>
        <!-- <view class="head_corp_right">
          条码编号：{{retData.info.code}}
        </view> -->
      </view>
      <view class="head_info_text">
        以上信息来源 中国物品编码中心
      </view>
    </view>
    <view class="gap"></view>
    <view class="content">
      <view class="content_img">
        <image :src="imgUrl + '17.png'" mode="aspectFill"></image>
      </view>
      <view class="content_text">
        上传配料表照片进行解析 请点击
      </view>
      <view class="content_btn" @click="chooseImage">
        点击上传
      </view>
    </view>
    <u-popup :show="alterMain" mode="center" @close="RestFun()" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" bgColor="transparent">
      <view class="alter-box">
        <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/alter-box.png" class="bg"></image>
        <view class="value">{{money}}元</view>
        <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/alter-box1.png" @click="RestFunOne" class="btn"></image>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  setHistory,
  setRestockItem
} from '@/api/api.js'
export default {
  data() {
    return {
      retData: {
        cate_list: [],
        info: {},
        item_list: [],
        stage_list: [],
        urlArr: []
      },
      alterMain: false,
      money: '5.00'

    };
  },
  onShow() {
    this.retData = uni.getStorageSync('RetData')
    this.setHistoryFun()
  },
  methods: {
    chooseImage() {
      const that = this
      uni.chooseImage({
        count: 3,
        sizeType: ['original', 'compressed'],
        success: (res) => {
          that.urlArr = []
          that.uploadFileAdd(res, 0, res.tempFilePaths.length)
        }
      });
    },
    async uploadFileAdd(res, num, max) {
      const that = this
      if (num == max) {
        console.log(that.urlArr.join())
        that.$nextTick(() => {
          that.setRestockItemFun(that.urlArr.join())
        })
      } else {
        const result = await that.uploadFileFun(res.tempFilePaths[num])
        that.urlArr.push(result.data.url)
        this.uploadFileAdd(res, num + 1, max)
      }

    },
    async uploadFileFun(src) {
      let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: 'https://app.jichacha.vip/api/newUpload',
          filePath: src,
          name: "file",
          header: {
            'Authorization': 'Bearer ' + token
          },
          success(res1) {
            resolve(JSON.parse(res1.data))
          },
          fail(res) {
            reject(res)
          }
        })
      })
    },
    RestFun() {
      this.alterMain = false;
      uni.setStorageSync('submitImgSrc', this.retData.info.code)
      uni.navigateTo({
        url: '/pages/scans/loading?SubmtType=2'
      })
    },
    RestFunOne() {
      this.alterMain = false;
      uni.setStorageSync('submitImgSrc', this.retData.info.code)
      uni.redirectTo({
        url: '/pages/users/wallet'
      })
    },
    setRestockItemFun(img) {
      setRestockItem({
        gcode: this.retData.info.code,
        image_url: img
      }).then((resOne) => {
        if (resOne.data.send_money) {
          this.alterMain = true
          this.money = resOne.data.money
        } else {
          uni.$u.toast('补充成功，感谢您的支持')
          setTimeout(() => {
            this.RestFun()
          }, 2000)
        }

      }).catch((e) => {
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    setHistoryFun() {
      setHistory({
        gcode: this.retData.info.code
      }).then((resOne) => {

      }).catch((e) => {
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 750rpx;
  padding-top: 70rpx;

  .head_box {
    .head_info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;

      .head_info_left {
        font-size: 34rpx;
        font-weight: bold;
        color: #434242;
      }

      .head_info_right {
        font-size: 28rpx;
        color: #737373;
      }
    }

    .head_corp {
      margin-top: 27rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;

      .head_corp_left {
        font-size: 28rpx;
        color: #afafaf;
      }

      .head_corp_right {
        font-size: 24rpx;
        text-align: right;
        color: #434242;
      }
    }

    .head_info_text {
      margin-top: 44rpx;
      font-size: 24rpx;
      text-align: center;
      color: #737373;
    }
  }

  .gap {
    margin-top: 30rpx;
    width: 750rpx;
    height: 12rpx;
    background: #f6f7fb;
  }

  .content {
    .content_img {
      margin: 80rpx auto 0;
      width: 160rpx;
      height: 178rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .content_text {
      margin-top: 96rpx;
      font-size: 24rpx;
      text-align: center;
      color: #434242;
    }

    .content_btn {
      margin: 30rpx auto 0;
      width: 586rpx;
      height: 100rpx;
      background: #2767e6;
      border-radius: 50rpx;
      font-size: 30rpx;
      line-height: 100rpx;
      font-weight: bold;
      text-align: center;
      color: #ffffff;
    }
  }
}
.alter-box {
  width: 700rpx;
  height: 881rpx;
  position: relative;
  .bg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }
  .btn {
    width: 554rpx;
    height: 109rpx;
    position: absolute;
    z-index: 2;
    left: calc(50% - 277rpx);
    bottom: 140rpx;
  }
  .value {
    font-size: 100rpx;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    color: #ff5543;
    font-weight: 700;
    top: 280rpx;
    z-index: 2;
  }
}
</style>